<template>
  <div class="box-container">
    <div class="leftBox">
      <div class="numberClass">
        <gameTypeModel v-for="item in gameTypeList" :key="item.id" :item="item" @clickClass="clickClass(item)" @contextmenu="contextmenu(item)" />
      </div>
    </div>
    <div class="rightBox">
      <div class="tabBox">
        <div class="box-list-container">
          <div class="box-query-form">
            <el-form :model="queryParam" label-width="auto" label-position="right">
              <el-row>
                <el-col :xl="6" :lg="6" :md="12" :sm="24">
                  <el-form-item label="游戏名称:">
                    <el-input v-model="queryParam.number" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :xl="12" :lg="12" :md="12" :sm="24">
                  <el-form-item label="是否上架:">
                    <el-input v-model="queryParam.className" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :xl="6" :lg="6" :md="12" :sm="24" class="table-search-btn">
                  <el-button icon="el-icon-refresh" @click="searchReset">重置</el-button>
                  <el-button type="primary" icon="el-icon-search" @click="searchQuery">查询</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="box-table">
            <div class="table-title">
              <div class="table-title-left">
                游戏列表
              </div>
              <div>
                <el-button plain class="btnAdd" icon="el-icon-plus" @click="handleAdd('新增')">新增一条</el-button>
                <!-- <el-button type="success" icon="el-icon-upload" @click="importExcelData">上传excel</el-button>
                <el-button type="success" icon="el-icon-download" :loading="exportExcelLoading" @click="exportExcelData">导出excel</el-button> -->
              </div>
            </div>
            <!-- 批量操作 -->
            <div v-if="selectedRowList.length" class="batchAction">
              <div class="batchAction-left">
                <el-dropdown>
                  <el-button>
                    更多菜单 <i class="el-icon-arrow-down el-icon--right" />
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <div @click="batchDelete"><i class="el-icon-delete" />删除</div>
                      <div @click="batchDelete"><i class="el-icon-delete" />上架</div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="batchAction-right">
                已选择
                <span style="font-weight: 700">
                  <el-link type="primary" :underline="false">{{ selectedRowList.length }}</el-link>
                </span>项
                <el-link type="primary" :underline="false" style="margin-left: 24px;" @click="onClearSelected">清空</el-link>
              </div>
            </div>
            <el-table ref="table" :data="dataSource" @selection-change="onSelectChange">
              <el-table-column type="selection" width="55" />
              <el-table-column label="序号" width="60" type="index" />
              <el-table-column label="游戏名称" prop="gameName" min-width="200" />
              <el-table-column label="是否上架" prop="isPutaway" min-width="200" />
              <el-table-column label="创建时间" prop="createTime" width="170" />
              <el-table-column label="更新时间" prop="updateTime" width="170" />
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleEdit('编辑', scope.row)">编辑</el-button>
                  <el-popconfirm title="确定删除吗？" style="margin-left: 10px" @confirm="handleDelete(scope.row[guidFieldName])">
                    <el-button slot="reference" type="text" style="color: red;">删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
              <div slot="empty" class="emptyBg">
                <img src="@/assets/img/emptyData.png">
              </div>
            </el-table>
            <div class="box-paging">
              <Pagination
                v-show="ipagination.total > 0"
                layout="total, sizes, prev, pager, next"
                :total="ipagination.total"
                :page.sync="ipagination.pageNum"
                :limit.sync="ipagination.pageSize"
                @pagination="loadData"
              />
            </div>
          </div>
          <!-- 抽屉 -->
          <!-- <updateDrawerModel ref="modalForm" @ok="modalFormOk" /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import gameTypeModel from './components/gameTypeModel.vue'
import { listMixin } from '@/mixins/listMixin'
import Pagination from '@/components/Pagination'

export default {
  components: {
    gameTypeModel,
    Pagination
  },
  mixins: [listMixin],
  data() {
    return {
      activeName: '1',
      gameType: '',
      gameTypeList: [
        { name: '全部', id: '全部', active: true },
        { name: '热门游戏', id: '热门游戏' },
        { name: '手游', id: '手游' },
        { name: '端游', id: '端游' },
        { name: '页游', id: '页游' },
        { name: '主机', id: '主机' }
      ],
      userInfo: this.$ls.get('USER_INFO') || {},
      url: {
        list: 'gameList.aspx?action=GetList',
        deleteBatch: 'gameList.aspx?action=DeleteBatch'
      }
    }
  },
  watch: {},
  created() {
  },
  mounted() {},
  methods: {
    // 点击类别
    clickClass(item) {
      console.log('点击类别 item', item)
      this.selectNode(item)
    },
    // 选中某个节点 其他节点取消选中状态
    selectNode(item) {
      this.gameType = item.name
      this.gameTypeList.forEach(v => {
        this.$set(v, 'active', v.id === item.id)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box-container .box-query-form{
  padding: 0;
}
.box-table{
  margin-top: 0;
  padding-top: 0;
}
.box-container{
  display: flex;
  background-color: #fff;
  .leftBox{
    width: 20%;
    .numberClass{
      overflow-y: auto;
      height: 730px;
      padding-right: 16px;
      border-right: 1px #dfe6ec solid;
    }
  }
  .rightBox{
    width: 80%;
    .tabBox{
      padding: 16px 16px 0;
      background-color: #fff;
    }
  }
}

/*滚动轨道样式*/
::-webkit-scrollbar-track {
	background: #c1c1c1;
	border-radius: 4px;
}
/*滚动条*/
::-webkit-scrollbar-thumb {
	background: #1890ff;
	border-radius: 10px;
}
::-webkit-scrollbar {
    width:6px;
}

// 类别操作按钮
.css-button-3d--sky {
  width: 78px;
  height: 32px;
  color: #fff;
  // padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  background: #80ed99;
  box-shadow: 0 5px #57cc99;
}
.css-button-3d--sky:hover {
  box-shadow: 0 3px #57cc99;
  top: 1px;
}
.css-button-3d--sky:active {
  box-shadow: 0 0 #57cc99;
  top: 5px;
}
.el-icon-plus{
  margin-right: 6px;
  // position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
}
</style>

